<template>
  <div style="background-color: #F5F5F5">
    <el-row>
      <el-col>
        <div class="sharing-box">
          <el-row>
            <el-col>
              <h3 class="sharing">开放共享</h3>
            </el-col>
            <el-col>
              <ul class="sharing-ul">
                <li v-for="(item,index) in sharing" :key="index">
                  <img :src="item.url" />
                  <div class="make-up">
                    <p class="p-title">{{item.title}}</p>
                    <p class="present">{{item.present}}</p>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <h3 class="empty">实拍控</h3>
            </el-col>
            <el-col>
              <ul class="empty-ul">
                <li v-for="(item,index) in empty" :key="index">
                  <div class="li-img">
                    <img :src="item.src" />
                  </div>
                  <p class="p1">{{item.name}}</p>
                </li>

              </ul>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <h3 class="like">猜你喜欢</h3>
            </el-col>
            <el-col>
              <el-card shadow="hover" class="like-card" v-for="(item,index) in card" :key="index">
                <div class="card-img">
                  <img :src="item.src" />
                </div>
                <div class="discount" v-show="item.flag">
                  <img :src="item.src1" />
                  <span class="scount">¥{{item.price}}</span>
                </div>
                <p class="p-card">{{item.p1}}</p>
                <p class="p-card1">{{item.p2}}</p>
                <div class="last">
                  <span class="span1">月付</span>
                  <span class="span2">¥{{item.month}}</span>
                  <span class="span3">¥{{item.total}}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sharing: [{
            url: "//image8.wbiao.co/mall/504ad3c863fb4971903956516b9b904a.png",
            title: "品牌商合作",
            present: "专业手表品牌运营团队，高效率品牌传播"
          },
          {
            url: "//image8.wbiao.co/mall/d890b35c2bdc4d789f1e17e7ce9b48fb.png",
            title: "维修店合作",
            present: "加盟诚信维修平台，降低成本 增加营收"
          },
          {
            url: "//image8.wbiao.co/mall/9c70024c9bb0414bb6b49230d233356d.jpg",
            title: "二手商家合作",
            present: "品牌背书权威鉴定，手表资产变现"
          },
          {
            url: "//image8.wbiao.co/mall/e2b2c28f9be04f55857af6e92209a557.jpg",
            title: "实体店合作",
            present: "共享万表资源，起点高 见效快"
          }
        ],
        empty: [{
            src: "//image8.wbiao.co/mall/20e26834410a4706a284a54ca5c54a65.jpg",
            name: "瑞士迪沃斯冠军潜水款绿蛟龙"
          },
          {
            src: "//image8.wbiao.co/mall/a4aaaaf3b7ca4e5faad90c08dbe56456.jpg",
            name: "CYS 古董手绘火焰纹 机械男表"
          },
          {
            src: "//image8.wbiao.co/mall/5ad280f623054d6fbb3534b0624438bd.jpg",
            name: "格拉苏蒂-莫勒 销量冠军款"
          },
          {
            src: "//image8.wbiao.co/mall/758d0747260a4c8b993765998f4d748b.jpg",
            name: "美若珍珠！赫柏林代表作，畅销30年"
          }
        ],
        card:[{
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:true,
          month:"395.3",
          total:"4743"
        },
        {
          src:require("@/assets/one.jpg"),
          src1:require("@/assets/tow.png"),
          price:"3,348",
          p1:"日本东方星",
          p2:"大师系列自动机械男表",
          flag:false,
          month:"395.3",
          total:"4743"
        }
        ]
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  .sharing-box {
    width: 1200px;
    margin: 0 auto;
  }

  .sharing-box .sharing {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .sharing-box .sharing-ul li {
    width: 286px;
    height: 240px;
    overflow: hidden;
    position: relative;
    float: left;
    cursor: pointer;
    margin-right: 13px;
  }

  .sharing-box .sharing-ul li img {
    transition: transform 1s;
  }

  .sharing-box .sharing-ul li img:hover {
    transform: scale(1.1);
  }

  .sharing-box .sharing-ul li .make-up {
    position: absolute;
    top: 10px;
    width: 100%;
  }

  .sharing-box .sharing-ul li .make-up .p-title {
    text-align: center;
    font-size: 16px;
    color: #cc9952;
    padding-top: 15px;
    padding-bottom: 10px;
  }

  .sharing-box .sharing-ul li .make-up .present {
    text-align: center;
    font-size: 12px;
    color: #666;
  }

  .sharing-box .empty {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .sharing-box .empty-ul li {
    width: 285px;
    height: 260px;

    overflow: hidden;
    float: left;
    margin-right: 13px;
    background-color: #FFFFFF;
    cursor: pointer;
  }

  .sharing-box .empty-ul li .li-img img {
    max-width: 100%;
    height: 100%;
    transition: transform 1s;
  }

  .sharing-box .empty-ul li .li-img img:hover {
    transform: scale(1.1);
  }

  .sharing-box .empty-ul li .p1 {
    font-size: 14px;
    color: #666;
    padding: 16px 20px 18px;

  }

  .sharing-box .like {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .sharing-box .like-card {
    width: 285px;
    height: 333px;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .sharing-box .like-card .card-img {
    padding-left: 10px;
    width: 223px;
    height: 223px;
  }

  .sharing-box .like-card .card-img img {
    max-width: 100%;
    height: 100%;

  }

  .sharing-box .like-card .discount {
    width: 223px;
    height: 73px;
    position: absolute;
    top: 170px;
  }

  .sharing-box .like-card .discount img {
    max-width: 100%;
    height: 100%;
  }
  .sharing-box .like-card .discount .scount{
    position: absolute;
    top: 50px;
    right: 10px;
    color: #FFFFFF;
  }
   .sharing-box .like-card .p-card{
     text-align: center;
     font-size: 12px;
     color: #666;
     padding-top: 10px;
     padding-bottom: 5px;
   }
   .sharing-box .like-card .p-card1{
     text-align: center;
     font-size: 12px;
     color: #999;
   }
   .sharing-box .like-card  .last{
     text-align: center;
   }
   .sharing-box .like-card  .last .span1{
     display: inline-block;
     font-size: 12px;
     background-color: #fe7e7e;
     color: #FFFFFF;
     border-radius: 3px;
   }
   .sharing-box .like-card  .last  .span2{
     font-size: 16px;
     color: #e65c5c;
     display: inline-block;
     position: relative;
     top: 2px;
   }
   .sharing-box .like-card  .last .span3{
     font-size: 16px;
     color: #666;
     position: relative;
     top: 3px;
     display: inline-block;

   }
</style>
